<template>
  <div _ngcontent-rtt-c366="" class="home-bottom-container">
    <div class="home-bottom-inner" style="transform: translateY(0px)">
      <div class="item-box" v-for="(item, index) in list" :key="index">
        <el-popover placement="top" :width="400" trigger="hover">
          <template #reference>
            <a href="javascript:void(0);" class="a">{{ item.name }}</a>
          </template>
          {{ item.name }}内容
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //灯杆设备
      list: [
        {
          id: 1,
          name: "灯杆",
        },
        {
          id: 2,
          name: "网关",
        },
        {
          id: 3,
          name: "照明",
        },
        {
          id: 4,
          name: "监控",
        },
        {
          id: 5,
          name: "屏幕",
        },
        {
          id: 6,
          name: "充电",
        },
        {
          id: 7,
          name: "气象",
        },
        {
          id: 8,
          name: "广播",
        },
        {
          id: 9,
          name: "5G",
        },
        {
          id: 10,
          name: "报警",
        },
        {
          id: 11,
          name: "电源",
        },
      ],
    };
  },
  created() {},
};
</script>

<style lang="scss">
/*首页底部*/
.home-bottom-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  padding-top: 40px;
  .home-bottom-inner {
    display: flex;
    justify-content: center;
    transform: translateY(60px);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    .item-box {
      position: relative;
      flex: 0 0 70px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background-image: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.2)
      );
      color: $main_color;
      cursor: pointer;
      &:hover {
        background-image: linear-gradient(
          rgba(255, 255, 255, 0) 30%,
          rgba(89,156,255,.5)
        );
      }
      &::before {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1px;
        height: 60px;
        background-image: linear-gradient(rgba(255, 255, 255, 0), $main_color);
      }
      &:last-of-type::after {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 60px;
        background-image: linear-gradient(rgba(255, 255, 255, 0), $main_color);
      }
      .a {
        display: block;
        height: 100%;
        color: #ffffff;
      }
    }
  }
}
</style>